<template>
  <transition name="cnode-toast">
    <div class="cnode-toast" v-show="isShow">
      {{ content }}
    </div>
  </transition>
</template>
<script>
export default {
  data() {
    return {
      timer: null,
      isShow: false,
      content: '',
    }
  },
  methods: {
    show() {
      this.isShow = true
    },
    hide() {
      this.isShow = false
    }
  }
}
</script>
<style lang="scss" scoped>
.cnode-toast {
  top: 0;
  left: 0;
  right: 0;
  color: #fff;
  padding: 16px;
  z-index: 1000;
  text-align: center;
  font-size: 16px;
  position: absolute;
  background-color: rgba(0, 0, 0, .4);
  transform: translate(0, 0);
  transition: transform .3s ease-out;
}
.cnode-toast-enter,
.cnode-toast-leave-to {
  transform: translate(0, -100%);
}
</style>
